const signertype = {
    template: `
        <div>
            <singer-box></singer-box>
        </div>
    `,
    components: {
        singerBox: {
            template: ` 
                <div class="singer">
                    <div v-for="item in this.list" class="singer-img">
                        <img :src="item.picUrl">
                        <p>{{item.name}}</p>
                    </div>
                </div>
            `,
            data() {
                return {
                    list: [],
                    type: '',
                    area: ''
                }
            },
            created() {
                this.type = this.$route.query.type;
                this.area = this.$route.query.area;
                this.getData(this.type, this.area)
            },
            methods: {
                getData(type = -1, area = -1) {
                    axios.get(`https://autumnfish.cn//artist/list?type=${type}&area=${area}&limit=35`).then(res => {
                        console.log(this.$route);

                        this.list = res.data.artists
                    })
                }
            },
            watch: {
                '$route'(to) {
                    this.getData(to.query.type, to.query.area)
                }
            }
        }
    }
}